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Agenda 


• What makes JavaScript unique and challenging 

• What makes V8 unique and challenging? 

• What the heck is WebAssembly and why? 
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We all love JavaScript 
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What makes JavaScript unique and interesting? 


• JavaScript is the language of the Web 

• Scripting language: programs presented in source form 

• "Classically slow" language 

• Prototype-based object model 

• Functional features with closures 

• Untyped: variables and properties do not have types, values do 

• A smattering of oddball features 


o Weird scoping rules 
o eval 
o with scopes 
o Proxies 
o Rest parameters 


o Default parameters 
o Generators 
o Undetectables 
o Holey arrays 
o Arguments object 


o 
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Challenge: programs presented in source form 


• Parsing has to be fast 

• Source code is slower for machines to parse 

o Source code parser: 1 -1 OMB/s 
o Binary format like bytecode: 10OMB/s 

• New language features all the time 

o All features supported by all virtual machines 
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Challenge: prototype-based object model 


var x = new SubClass("mine”, 


100 ); 


function BaseClass(name) { 
this.name = name; 

} 

function SubClass(namej data) { 

BaseClass.call(this, name); 
this.data = data; 

} 

BaseClass.prototype.print = function() { 
print(this.name); 

} 



Subclass.prototype._proto_ = BaseClass.prototype; 
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Challenge: prototype-based object model 



function BaseClass(name) { 
this.name = name; 

} 

BaseClass.call(thiSj name); 
this.data = data; 

} 

BaseClass.prototype.print = function() { 
print(this.name); 

} 




on the “prototype" 
of an object 
• Prototypes chain 
together to emulate 
inheritance 


Subclass.prototype._proto_ = BaseClass.prototype; 
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Challenge: prototype-based object model 


var x = new SubClass("mine”, 


100 ); 


function BaseClass(name) { 
this.name = name; 

} 

function SubClass(namej data) { 
BaseClass.call(this, name); 
this.data = data; 


} 






• Objects instantiated 
by "new Function()" 
syntax 



Prototypes chain 
together to emulate 
inheritance 


Subclass.prototype._proto_ = BaseClass.prototype; 
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Challenge: prototype-based object model 


var x = new SubClass("mine” : 


100 ); 


function BaseClass(name) { 
this.name = name; 

} 

function SubClass(name, data) { 

BaseClass.call(this , name); 
this.data = data; 

} 

BaseClass.prototype.print = function() { 
print(this.name); 

} 




• Objects instantiated 
by "new Function()" 
syntax 

• Methods installed 
on the "prototype" 
of an object 
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Challenge: functional programming with closures 


function Counter(name) { 
var count = 0; 
return { 
inc: 



var x = new Counter(); 







I 


• Object literals allow 
grouping multiple 
closures into a 
"mini-object" 


var before = x.get(); 
x.inc(); 
x.print(); 
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Challenge: functional programming with closures 


function Counter(name) { 
var count = 0; 
return 





} 


var x = new Counter(); 


• Closures over 
locals, even 
mutable locals 



var before = x.get(); 
x.inc(); 
x.print(); 
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Challenge: untyped variables and operations 



Variables, 
parameters, 
properties, and 
expressions do not 
have types 
Operators are 
overloaded for 
different types of 
values 
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Challenge: untyped variables and operations 




properties, and 
expressions do not 
have types 
Operators are 
overloaded for 
different types of 
values 
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Challenge: untyped variables and operations 
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• Variables, 
parameters, 
properties, and 
expressions do not 
have types 








Glance at Semantics: + 


12.7.3.1 


Runtime Semantics: Evaluation 


A ddili veExpression 


operator + 

AdditiveExpression 4 MultiplicativeExpression 


1. Let Iref be the result of evaluating AdditiveExpression. 

2. Let Ival be GetValue(/ref). 

3. ReturnIfAbrupt(/va/). 

4. Let rref be the result of evaluating MultiplicativeExpression. 

5. Let rval be GetValuefrre/). 

6. ReturnlfAbruptfrva/). 

7. Let Iprim be ToPrimitive(/va/). 

8. ReturnlfAbruptf Iprim). 

9. Let rprim be ToPrimiti ve(rva/). 

10. ReturnlfAbrupt(rprim). 

11. If Type(/pr/m) is String or Type( rprim) is String, then 

a. Let Istr be ToString (Iprim). 

b. ReturnIfAbrupt(/str). 

c. Let rstr be ToString(rprim). 

d. ReturnlfAbrupt(rstr). 

e. Return the String that is the result of concatenating Istr and rstr. 

12. Let Inum be ToNumber(/pr/m). 

13. ReturnIfAbrupt(/num). 

14. Let rnum be ToNumber(rpn'm). 

15. ReturnlfAbrupt(mum). 

16. Return the result of applying the addition operation to Inum and rnum. See the Note below 12.7.5. 


NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint in some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11), by using the 
logical-or operation instead of the logical-and operation. 
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Glance at Semantics: + 



11. If Type(/pn'm) is String or Type( rprim) is String, then 

a. Let Istr be ToString(/pr/m). 

b. RetumIfAbrupt(/str). 

c Let rstr be ToString(rprim). 

d. RetumlfAbrupt(rstr). 

e. Return the String that is the result of concatenating Istr and rstr. 

12. Let Inum be ToNumber(/prim). 

13. RetumIfAbrupt(/mim). 

14. Let mum be ToNumber(rprim). 

15. RetumIfAbrupt(mu/n). 

16. Return the result of applying the addition operation to Inum and mum. See the Note below 12.7.5. 


NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint in some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11), by using the 
logical-or operation instead of the logical-and operation. 
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7.1.1 ToPrimitive (input [, Preferrediype]) 


The abstract operation ToPrimur. P ”i m '■* 4" “| % / gP referredType. The abstract 

opeiaiioiiToPilmlUve cunveib its i/liuivy I I _L III _1_ V CJaLile ul convening to more 

than one primitive type, it may use the optional hint Pryfcm , clT\ / pe to favour tbal type. Conversion occurs according 
to Table 9:' 


Table 9 —ToPrimitive Conversions 


Input Type 

Result 

Completion 

Record 

If input is an abrupt completion, return input. Otherwise return ToPriinitive(input.[[value]]) also 
passing the optional hint PreferredTvpe. 

Undefined 


Null 

Return input. 

Boolean 

Return input. 

Numjwr 

Renan input. 


Return input. 

Symbol 

Return input. 

Object 

Perform the steps following this table. 


When Type( Input) is Object, the following steps ate taken: 

1. If Preferredtype was not passed, let hint be "default". 

2. Else if Preferrediype is hint String, let him be "string". 

3. Else PieferretlType is hint Number, let (tint be "number". 

4. Let emliclbPrim be GetMethod( input, @(®toPriinitive). 

5. RetumlfAbnipt(exoticJbPnni). 

6. if exoticToPrim is not undefined, then 

a. Let result be CallfexoticToPrim, input, «him»). 

b. ReturnIfAbrupt(resu/i). 

c. If Type(resulr) is not Object, return result. 

d. Throw a TypeError exception. 

7. If hint is "default", let hint be "number". 

8. Return OrdlnaryToPrlmltlve( Input, hint). 

When the abstract operation OrdinaryToPrimitive is called with aiguments O and hint, the following steps are taken: 

1. Assert: Type(O) is Object 

2. Assert: Type(hint) is String and its value is either "string" or "number". 

3. If (lint is "string", then 

a. Let methodNames be «"toString", "valueOf"». 

4. Else, 

a. Let methodNames be •< "valueOf", "toString"». 

5. For each name in methodNames in List order, do 

a. Let method be Get(0, name). 

b. RetumIfAbrupt(method). 

c. If lsCallable(met!iod)is true, then 

1. Let result be Callfmerhod, O). 

1L ReturnlfAbrupt)result). 

iii. If Typefresult) is not Object, return result. 

6. Throw a TypeError exception. 

NOTE When ToPrimitive is called with no hint, then it generally behaves as if the hint were Number. 

However, objects may over-ride this behavioar by defining a @@toPrimilive method. Of the objects 
defined in this specification only Date objects (see 20.3.4.45) and Symbol objects (see 19.4.3.4) over¬ 
ride (he default ToPrimitive behaviour. Date objects treat no hint as if the hint were Suing. 
































Glance at Semantics: + 


























































Glance at Semantics: + 


12.7.3.1 Runtime Semantics: Evaluation 


ditiwLxpression : AJJ: m,-, a 

... operator + 

2. Let Ival be GetValue(lref). • 


2. Let Ival be GetValueflrefl. • 

3, RcturnlfAbruptf Ival). 


5 Let ival be GetValue(rre/). 


a Return! fAbrupt(lprim). 

9. Let rprtm be ToPrimiiive(rvof)- 
10. ReturnlfAbruptf rprim). 

1L If Typef/prim) is String or Type(rprim) is String, then 



d. RetumlfAbrupt(rstr). 

e. Return the Strlna that is the result of concatenation istr and rstr. 



13. ReturnlfAP uiptl lliutl l ). ' 

14. Let mum be TbNumber(rprim). 

15. Return! fAbrupt(rnu;n). 

NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint In some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11). by using the 
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Glance at Semantics: + 


12.7,3.1 Runtime Semantics 



SperiFEon + 
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GetMethod 

p. 
















































































































































































Glance at Semantics: + 
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_ GetMethod 



■j | 


GetV 


IS Property 
Access 


ToObject 


User Getter 
Method 


Proxy 

Intercession 


































































































































































Glance at Semantics: + 


12 . 7 . 3.1 


Runtime Semantics: Evaluation 


A ddili veExpression 


operator + 

AdditiveExpression 4 MiiltiphcativeExpression 


1. Let Iref be the result of evaluating AdditiveExpression. 

2. Let Ival be GetValue(/ref). 

3. ReturnIfAbrupt(/va/). 

4. Let rref be the result of evaluating MultiplicativeExpression. 

5. Let rval be GetValuefrre/). 

6. ReturnlfAbruptfrva/). 

7. Let Iprim be ToPrimitive(/va/). 

8. ReturnlfAbruptf Iprim). 

9. Let rprim be ToPrimiti ve(rva/). 

10. ReturnlfAbrupt(rprim). 

11. If Type(/pr/m) is String or Type( rprim) is String, then 

a. Let Istr be ToString (Iprim). 

b. ReturnIfAbrupt(/str). 

c. Let rstr be ToString(rprim). 

d. ReturnlfAbrupt(rstr). 

e. Return the String that is the result of concatenating Istr and rstr. 

12. Let Inum be ToNumber(/pr/m). 

13. ReturnIfAbrupt(/num). 

14. Let rnum be ToNumber(rpn'm). 

15. ReturnlfAbrupt(mum). 

16. Return the result of applying the addition operation to Inum and rnum. See the Note below 12.7.5. 


NOTE 1 No hint is provided in the calls to ToPrimitive in steps 7 and 9. All standard objects except Date 
objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence 
of a hint as if the hint String were given. Exotic objects may handle the absence of a hint in some 
other manner. 

NOTE 2 Step 11 differs from step 5 of the Abstract Relational Comparison algorithm (7.2.11), by using the 
logical-or operation instead of the logical-and operation. 


Local outcome 

Number Conversion, Number Add 


String Conversion, String Add 


Side effects 


DS property access 
User method invocations 
Proxy method invocations 
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Challenge: untyped variables and operations 


function add(a, b) { 
return a + b; 


} 

add(1^ 2); 
add("foo”, 1); 
add(l, "foo JJ ); 
add({foo: 1); 

add("hello”, ); 

add(1.01, 3.03); 




Variables, 
parameters, 
properties, and 
expressions do not 
have types 
Operators are 
overloaded for 
different types of 
values 


Google 







Challenge: eval 


function add(a, b) { 
return eval(a) + 


} 

add(1, 2); 
add("b = 30 ”, 1 ); 
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The eval operator 
evaluates a string 
as if the code was 
injected directly into 
the scope 
Can modify locals, 
introduce new 
locals, and other 
horrible things 






Challenge: eval 


function add(a, b) { 
return eval(a) + 

} 

add(1, 2); 


add( 


); 
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The eval operator 
evaluates a string 
as if the code was 
injected directly into 
the scope 

introduce new 
locals, and other 
horrible things 








Other challenges 
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Lots of neat and 
surprisingly tricky 
features 

Most interact poorly 
Conversion 
gotchas, like the 
odd falsy object 
Proxies 

Web compatibility 
issues 






The V8 Approach 
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What makes V8 unique and interesting? 

• V8 was the first really fast JavaScript Virtual Machine 

o Launched with Chrome in 2008 
o 10x faster than competition at release 
o 10x faster today than 2008 

• Efficient object model using "hidden classes," a technique from Self VM 

• JITs galore 

o Fast AST-walking JIT compiler: fullcodegen (2008) with inline caching 
o Optimizing JIT compiler: Crankshaft (2010) with type feedback and deoptimization 
o Optimizing JIT compiler: TurboFan (2015) with type and range analysis, sea of nodes 

• GCs galore 

o Evolution from simple generational collector to incremental and concurrent collector 
o Scheduling GC to reduce jank and save memory 
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JavaScript Program Lifetime 
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V8 Approach: parsing 


• Parsing has to be fast 

o Parsing JS is hard: hand-written, recursive descent parser 

• Two modes: 

o preparse (detect structure only) 
o full (build AST) ~3x slower 

• Lazy parsing: 

o A full parse of a function isn't done until needed to execute it 
o Preparser finds boundaries of functions to quickly parse them later 

• Streaming parsing: 

o Parse while script is downloading over the wire 
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V8 Approach: lazy compilation 


JSFunction 



JavaScript 

source 


Abstract 
Syntax Tree 


parse 



>=> 

unoptimized 

“fullcode” 

compiler 



machine code 
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V8 Approach: object model 


function MyObject(name, data) { 
this.name = name; 
this.data = data; 
return this; 


} 

var x = new MyObject("string”, 0); 
x.extra = 44; 
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V8 Approach: object model 


function MyObject(name, data) { 
this.name = name; 
this.data = data; 
return this; 
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map[MyObject] 



size 

properties 
















V8 Approach: object model 


function MyObject(name. 



this.data = data; 
return this; 


data) { 


} 

var x = new MyObject("string”, 0); 
x.extra = 44; 
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map 


"string” 


map[MyObject2] 

8 

1 


name 

4 


size 

properties 

















V8 Approach: object model 


function MyObject(name, 
this.name = name; 


return this; 


data) { 


} 

var x = new MyObject("string”, 0); 
x.extra = 44; 
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map[MyObject3] 



size 

propertie; 






















V8 Approach: object model 


function MyObject(name, data) { 
this.name = name; 
this.data = data; 


} 

var x = new MyObject("string”, 0); 
x.extra = 44; 


Google 


map[MyObject3] 



size 

propertie; 





















V8 Approach: object model 


function MyObject(name, data) { 
this.name = name; 
this.data = data; 
return this; 


} 

var x = new MyObject("string”, 0); 
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map[MyObject4] 


























V8 Approach: object model 

map[MyObject4] 


Dynamically 
estimated “slack 
tracking” 




Statically estimated 
“expected number of 
properties” 
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V8 Approach: map forest 
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blam 


map 


map 


map 


map 


map 


map 


































































V8 Approach: map forest 
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potentially 
stable map 


map 


map 


map 


map 


map 


map 


































































V8 Approach: object model 


function MyObject(name, data) { 
this.name = name; 
this.data = data; 
return this; 


} 

MyObject.prototype.print = 
function() { 

print("name: " + this.name); 
print("data: " + this.data); 




var bar = new MyObject("foo”, 9); 


Google 


map 


map 


"foo" 


9 


bar 


_proto_ 

8 

2 

name 

0 

data 

4 


► mao 


f unc 


f unc 


f unc 


MyObject. prototype 





















V8 Approach: object model 
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V8 Approach: object model 
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V8 Approach: untyped variables and operations 



Dynamically record 
types of inputs to 
overloaded 
operations 


Google 






V8 Approach: untyped variables and operations 



Dynamically record 
types of inputs to 
overloaded 
operations 


Most dynamism is site-specific 
and stable. Normally safe to 
assume that what happened last 
time will happen the next time. 
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V8 Approach: untyped variables and operations 



“Usually numbers” they said! 


Except they lied! 

Always have a backup plan. 
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V8 Approach: adaptive optimization 


function run(a, b) { 

for (var i = 0; i < 100; i++) { 
var x = new Adder(a, b); 
x.add(i); 


} 

return x.result(); 


} 
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V8 Approach: adaptive optimization 



function run(a, b) { 
for (var i = 0; 
var x = 

(i); 

} 

return 


Record type for i 
Record type for i 


Record target for new Adder 


Record maps for x 
Record targets for x. add 


Record maps for x 
Record targets for x. result 
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V8 Approach: adaptive optimization 


function run(a, b) { 
for (var i = 0; 
var x = 

(i); 

} 

return 


Record maps for x 
Record targets for x. result 



Record type for i 


a | 

Int arithmetic 


Record type for i | n t arithmetic 


Record target for new Adder 


Inline 


Record maps for x 
Record targets for x. add 


Remove map 
checks 


Remove map 
checks 


Inline 


Inline 


Google 























V8 Approach: adaptive optimization 



Type analysis 



hotness 

criteria 


Remove map 
checks 


Inline 


GVN 
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V8 Approach: adaptive optimization 




optimized 

compile 



optimized 

code 


Google 









V8 Approach: adaptive optimization 




deoptimize 
upon failed 
speculation 



optimized 

code 
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V8 Approach: adaptive optimization 




deoptimize 



optimized 

code 
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A Zoo of Tiers 

FullCodeGen 
Unoptimized compiler 



Crankshaft TurboFan 

optimizing compiler optimizing compiler 
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A Zoo of Tiers (4) 

TurboFan 

optimizing compiler 



generates 


Google 


Ignition 

interpreter 



Faster 

startup! 

Saves 

memory! 

Still 

portable! 

(11 supported 
TurboFan archs) 











The Impossible Garbage Collection Triad 

High 



Latency Memory Overhead 
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V8 Garbage Collection 


S Scavenger (~0-10 ms) 

I Incremental Marking (~0.01 -CONFIGURABLE ms) 
M Final Mark-Compact Collection (~4-40 ms) 

F Full Mark-Compact Collection (>40ms) 

JavaScript Execution Time 


Start Mark-Compact 


M 


Finish Mark-Compact 
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Confidential & Proprietary 








































Estimating GC pauses 


S Scavenger (~0-10 ms) 

I Incremental Marking (~0.01-CONFIGURABLE ms) 

M Final Mark-Compact Collection (~4-40 ms) 

F Full Mark-Compact Collection (>40ms) 

JavaScript Execution Time 


Start Mark-Compact 


M 


Finish Mark-Compact 
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Confidential & Proprietary 








































Estimating GC pauses 


S Scavenger (~0-10 ms) 

I Incremental Marking (~0.01-CONFIGURABLE ms) 

M Final Mark-Compact Collection (~4-40 ms) 

F Full Mark-Compact Collection (>40ms) 

JavaScript Execution Time 
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Confidential & Proprietary 








































Latency versus Memory Overhead 


• Foreground tab 

o Latency is critical 

o New frames are drawn every 16.66 ms when 
animation or scrolling happens 
o Reducing memory becomes important as soon 

as the tab becomes 
inactive 

• Background tabs 

o Memory consumption more important than 
latency 

o Idle tabs can be aggressively garbage collected 
to save memory 
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Idea: Make garbage collection invisible 


Google 

When is the best time to do a GC? 

When nobody is looking. 

Using camera to track eye movement 
When subject looks away do a GC. 



I. WristsStraight 


Lumbar 

Support 


r S ? jtB«kAjs!ojo; 


Adjustable 

Scat 

Height 


| feet on floor; 
footrest for 
shorter people 


Google 


Rick Hudson, GopherCon 2015 











Life of an animation Frame 


Main Thread 

JavaScript 

Commit 

IDLE TIME 

Compositor 

Begin Frame 

Commit 

Manage Tiles 


Draw 



Start Frame 


16.6 ms 


End Frame 
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Life of an animation Frame 


Main Thread 

JavaScript Garbage Collection JavaScript 

Commit 

IDLE TIME 


Compositor 

Begin Frame 

Commit 

Manage Tiles 


Draw 


Start Frame 


16.6 ms 


EndTrame 

MISSED 

FRAME 
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Life of a frame 
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16ms 


16ms 


16ms 


16ms 


16ms 




























Latency-driven Idle Time GC Scheduling (PLDI16) 

• V8 heuristics tries to estimate: 

o average young generation collection speed/MB 
o average incremental marking speed/MB 
o average finalization of mark-compact speed/MB 

• V8 registers an idle garbage collection task in the Chrome scheduler when 
given garbage collection operation should happen soon 

• The task scheduler will execute it when there is idle time 

o apportioning up to 50ms to perform garbage collection 
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Telemetry Infinite Scrolling Benchmarks 
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Confidential & Proprietary 
















































WebAssembly 

(demo) 


Google 



Motivation for WebAssembly 

• Big pressure to bring native code to the web 

o Competition with installed mobile apps (Android, iOS) 
o Big-time OpenGL apps: games, CAD programs, maps 
o Extensibility: audio/video codecs 

• Existing solutions fall short 

o JavaScript increasing contortions to serve as a compilation target 
o PNaCI encountered heavy industry resistance 

• Demand for new language capabilities limited by JS bottleneck 

o SIMD 

o SharedArrayBuffer 
o Threads 


Google 


asm.js? what's that? 


a = x + y 


Normal 

JavaScript 

ToNumber? 

ToString? 

StringAdd? 

IntegerAdd? 

DoubleAdd? 


x: int32 
y: int32 

a = x + y | 0 


asm.js 


lnt32Add 
a: int32 


x: float64 
y: float64 

a = +(x + y) 

asm.js 

Float64Add 
a: float64 
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asm.js? what's that? (2) 


var buffer = new ArrayBuffer(16 * 1024 * 1024); 
function module(buffer, stdlib) { 

"use asm”; 

var heap8 = new Int8Array(buffer); 
function foo(a) { 
a = a | 0; 

return heap8[a] + 1 | 0; 

} 

return {foo: foo} 

} 

var mod = module(buffer, {print: print}); 
mod.foo(100); 


Google 


asm.js? what's that? (3) 

• Emscripten: A POSIX-like platform with 

o Toolchain based on forked LLVM 
o libc 

o OpenGL (on top of WebGL) 
o a community 
o Game engines 
o Applications 
o Benchmarks 
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asm.js? what's that? (4) 

• 2 engines specially recognize asm.js subset and validate that subset 

o Mozilla Firefox - pioneer 
o Microsoft Edge - fast follow 

• V8 uses TurboFan's advanced type analysis to recover the same information 

o Within ~X% of custom solution on most benchmarks 
o No inter-procedural optimizations 
o Crossover with optimizing normal JavaScript 

• V8 can validate asm.js subset and internally translate to WebAssembly 
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What is WebAssembly? 

• A compilation target for native 

o C/C++, other languages -> WASM 

• A new capability for the web 

o More than just compressed asm.js 
o float32, int64, threads*, SIMD* 

• A complement to JavaScript 

o interface to/from JS code 
o integrate with WebAPIs 

• Performance guarantee (ish) 

o Fast calling conventions 
o no boxing, no GC 
o AOT 
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What is WebAssembly not ? 

• A value judgment about languages 

o JavaScript vs C++ vs Java vs Dart 

• The backend of some C compiler 

o LLVM bitcode, gcc GIMPLE, sea of nodes 

• A programming language 

o generated and manipulated by tools 

• A separate VM within Chrome 

o instead: built on TurboFan and V8 



V8 Pipeline Design (asm.js) 



JavaScript 

source 




optimized 

code 


Google 






V8 Pipeline Design + WASM 
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source 




optimized 

code 
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wasm binary 













V8 Pipeline Design + asm.js + WASM 



JavaScript 


source 
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code 


wasm binary 














WebAssembly in a nutshell 


• Data Types 

o void i32 i64 f32 f64 

• Functions 

o Flat, single global table 
o Static binding 
o Indirect calls through table 

• State: linear memory 

o large, bounds-checked array 

• Trusted execution stack 


Google 


Data Operations 


o 

i32: 

+ - * 

/ 

% « 

>> >>> etc 

o 

i64: 

+ - * 

/ 

% << 

>> >>> etc 

o 

f 32: 

+ - * 

/ 

sqrt 

ceil floor 

o 

f64: 

+ - * 

/ 

sqrt 

ceil floor 

o 

conversions 




o 

load 

store 




o 

call 

direct 

call 

indirect 


Structured Control Flow 

o if loop block br switch 



WebAssembly trusted and untrusted state 


linear memory 
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mem size 


application 


virtual machine 
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3 0 indirect function table 
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Compiling C/C++ to WebAssembly 


linear memory 


0 


void* (i32) 


addressable 

stack 


mem size 


virtual machine 


• C compiler translates pointers to i32 indices 

• C compiler places addressable stack in memory 

• asm.js bounds checks (~5% overhead) 


I execution 
stack 


Google 












WebAssembly binary code 


• Goals: 


o 

o 

o 

o 


compact 
easy to verify 
easy to compile 
extensible 


=> smaller than minified JS 
=> one linear pass 

=> one linear pass to construct IR or baseline JIT 
=> anticipate new bytecodes and types 


• Design: 

o AST-based post-order encoding of function bodies 
o All AST nodes are expressions 
o Optional application-specified opcode table 


Google 


Module structure 



Memory declaration 
Function signatures 

Functions 

Indirect Function Table 

Initialized data 


Google 



Module structure 



Memory declaration 
Function signatures 

Functions 

Indirect Function Table 

Initialized data 


Google 


min_size = 16mb 
max_size = lgb 
exported_to_js = false 





Module structure 



Memory declaration 
Function signatures 

Functions 

Indirect Function Table 

Initialized data 


Google 


(i32, i32) -> i32 
(i64j i32) -> i32 
(f32) -> i32 





Module structure 



Memory declaration 
Function signatures 

Functions 

Indirect Function Table 

Initialized data 


Google 


myfunc: 
<sig> 
<flags> 
<code> 





Module structure 



Memory declaration 
Function signatures 

Functions 

Indirect Function Table 

Initialized data 


Google 


0: myfuncl 
1: myfunc2 
2: myfunc2 






Module structure 



Memory declaration 
Function signatures 

Functions 

Indirect Function Table 

Initialized data 


Google 


0x01099de8: <data> 
0x0f0a9cl2: <data> 
0x00034a00: <data> 





Bytecode => TurboFan 

• One Linear pass to construct sea of nodes 

o SSA environment tracks control and effect dependencies 
o Stack of if, blocks, and loops 
o Conservative phi insertion at loop headers 
o Reduction steps generate nodes in the IR graph 

• Machine-level graph 

o Immediately suitable for code generation 

o Correct sea-of-nodes can go through scheduling 

o Can apply machine-level and machine-independent optimizations 

• Fast calling convention 

o No boxing of double arguments 
o All arguments in registers 
o No extra JSFunction / context arguments 

Google 


Pre-order encoding of an AST 


if (a) return 0; else return 2; 


return a?0:2 



if 
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ret 
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if 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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if 

local 

#0 

ret 
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#0 

ret 
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#2 
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unfinished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 


if 





shift 







































Decoding preorder to IR 


if (a) return 0; else return 2; 



advance 
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unfinished 


finished 



Production stack 


if 










































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 


if 





local 


shift 









































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 



local 


reduce 










































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 



reduce 






































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 







































Decoding preorder to IR 


if (a) return 0; else return 2; 
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local 
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ret 


iconst 


#0 


ret 
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unfinished 


finished 



Production stack 




shift 








































Decoding preorder to IR 


if (a) return 0; else return 2; 



if 


local 


#0 


ret 


iconst 
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ret 
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#2 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 
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shift 












































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 
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reduce 












































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 
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reduce 









































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 



ret 


reduce 










































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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if 


local 


#0 


ret 
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ret 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 



Production stack 









































Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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unfinished 


finished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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return 


else 

return 

1 2 
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unfinished 
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Decoding preorder to IR 


if (a) return 0; else return 2; 
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finish 


unfinished 



finished 
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Bytecode => TurboFan 

• One Linear pass to construct sea of nodes 

o SSA environment tracks control and effect dependencies 
o Stack of if, blocks, and loops 
o Conservative phi insertion at loop headers 
o Reduction steps generate nodes in the IR graph 

• Machine-level graph 

o Immediately suitable for code generation 

o Correct sea-of-nodes can go through scheduling 

o Can apply machine-level and machine-independent optimizations 


Google 


TurboFan graph example 


► control edge 

► value edge 


function (x) { 
return x ? 1 : 2; 

} 


y| Start 

1 


Branch 



IfFalse 



Merge - 

i 

i 

End 


x 



effect edge 
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TurboFan SSA Environment 
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Using the SSA environment 


bytecode: local[0] = local[0] + local[l] 




Before 


SsaEnv 


i] tb m m 
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Graph 
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Minimal SSA Renaming in one pass 


if (a) return 0; else return 2; 




Virtual CFG 
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Minimal SSA Renaming in one pass 


if (a) return 0; else return 2; 




Virtual CFG 

t - ssa N 

'v._!_^ 
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I 1 l 
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Minimal SSA Renaming in one pass 


if (a) return 0; else return 2; 
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local 
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true (split) 


false (split) 


end if (merge) 













































































Stack of SSA environments 


Virtual Decoder Path 
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Actual Decoder Path 














































































The same great AST: now in postorder! 


Function Bodies 


Google 


Post-order encoding of an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 


finished 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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finished 
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Decoding post-order to an AST 


return 3 + x * 4 


finished 
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Decoding post-order to an AST 


return 3 + x * 4 


finished 
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Decoding post-order to an AST 


return 3 + x * 4 


finished 




iconst 


#3 


iconst 


#4 


local 


#0 


imul 


iadd 


ret 


const#3 


const#4 


local 


push 


Google 















































Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 





finished 
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Decoding post-order to an AST 


return 3 + x * 4 






finished 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


return 3 + x * 4 
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Decoding post-order to an AST 


finished 


return 3 + x * 4 
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Decode+Verify performance 

return 3 + x * 4 



preorder 
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Preorder vs Postorder (arithmetic) 
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Decode+Verify performance 

select (2, 3 , x) 



preorder 
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Decode+Verify performance 
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Preorder and Postorder (blocks) 
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Postorder encodings of control 


block 

br 

br_if 

if 

if_else 

tableswitch 
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Preorder vs. Postorder block 


(block x, y, z) 


block 


preorder bracketed 
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Preorder vs. Postorder block verification 


(block x, br $0, z) 



single-pass verification 
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Preorder vs. Postorder if/else 

(if else x, y, z) 
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Preorder vs. Postorder if/else 


(if else x, y, z) 
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preorder 
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end 
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Preorder vs. Postorder if/else 

(if x, y) 
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Preorder vs. Postorder tableswitch 


(tableswitch x, y, z, w) 
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Preorder vs. Postorder tableswitch 
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WebAssembly binary code 


• Goals: 


o compact 
o easy to verify 
o easy to compile 
o extensible 

• Did we deliver? 


=> smaller than minified JS 
=> one linear pass 

=> one linear pass to construct IR or baseline JIT 
=> anticipate new bytecodes and types 


o Fast single-pass decode+verify (> 10OMB/s) 
o Single-pass to compiler IR demonstrated (V8/TurboFan) 
o Fast optimizing compiler (1.8MB/s single thread, 7MB/s with 8 threads) 
o Within 20% of native code execution speed (geomean; vs 80% for asm.js) 
o Single-pass compiler in development (Mozilla) 


Google 


Compiling WASM vs. Compiling asm.js 

• JavaScript is not statically typed 

o Values have types, not variables 
o 8 is a number, “foo” is a string 

o All basic operators (+ -/*%<< >>) are overloaded or have implicit conversions 

• All arithmetic is done in 64-bit floating point 

o Empirically most programs use small integers (<= 31 bits) 
o Overflow to double causes bailout to slow path, allocation, etc 
o Troublesome cases {-0.0 NaN Infinity -Infinity} 

• Type "annotations” in asm.js 

o a + b | 0 is integer arithmetic 

o +(a + b) is double arithmetic 

o (a >>> 0) < (b >>> 0) is an unsigned comparison 


Google 


Type and Range Analysis (asm.js) 
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Typed lowering as Reduction (asm.js) 
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no lowering necessary! 
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WebAssembly Status 

• LLVM backend upstream 

• Lots of tools 

• Reference implementation (spec) in Standard ML 

• 3 Browser engines have native support in various stages 

o Google Chrome Beta: fully spec compliant on all architectures, behind a flag 
o Mozilla Firefox: optimized for ia32 and x64, behind a flag 
o Microsoft Edge: support in an experimental build 

• MVP (Version 1.0) expected to be shipped this summer 

• Standardization expected by the end of the year 


Google 


https://github.com/WebAssembly/ 


Questions? 


Google 



